<template>
    <ContentBox title="自然环境(水)">
        <div class="content">
            <div class="header">
                <ziranhuanjingshuiOne></ziranhuanjingshuiOne>
            </div>
            <div class="middle">
                <div>
                    <div>水域面积:6万平方公里</div>
                    <div>平均年降水量:0.2亿平方米</div>
                    <div>地下水水位:10M</div>
                </div>
                <div>
                    <div>淡水资源总量:35亿平方米</div>
                    <div>河川径流量:6万平方米</div>
                </div>
            </div>
            <div class="bottom">
                <ziranhuanjingShuiTwo></ziranhuanjingShuiTwo>
            </div>
        </div>
    </ContentBox>

</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"

    import ziranhuanjingshuiOne from "./ChartsComponents/ziranhuanjingshuiOne"
    import ziranhuanjingShuiTwo from "./ChartsComponents/ziranhuanjingShuiTwo"

    export default {
        name: "Preview",
        components: {
            ContentBox,
            ziranhuanjingshuiOne,
            ziranhuanjingShuiTwo
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        width: 100%;
        height: 100%;
        display: flex;
        padding: 40px;
        flex-direction: column;
        > .header {
            height: 40%;
        }
        .middle {
            height: 22%;

            display: flex;

            > div {
                flex: 1;

                >div{
                    font-size: 40px;
                    font-family: "黑体", "Dosis", Arial, Helvetica, sans-serif;
                    margin-top: 20px;
                }
            }

        }
        .bottom {
            flex: 1;
        }

    }
</style>
